<template>
	<view class="page-container">
		<!-- 顶部操作按钮 -->
		<view class="top-btns">
			<button class="btn recharge-btn" hover-class="btn-hover" @click="goToRecharge">充值</button>
			<button class="btn refund-btn" hover-class="btn-hover" @click="goToRefund">返还</button>
		</view>

		<!-- 统计数据区域 -->
		<view class="stats-wrap">
			<view class="stat-item">
				<text class="stat-label">充值总收入</text>
				<text class="stat-value">¥{{ formatCurrency(45474.00) }}</text>
				<text class="stat-desc">累计充值金额</text>
			</view>
			<view class="stat-item">
				<text class="stat-label">总返还</text>
				<text class="stat-value">¥{{ formatCurrency(41456.00) }}</text>
				<text class="stat-desc">累计返还金额</text>
			</view>
		</view>

		<!-- 时间筛选栏 -->
		<view class="filter-bar">
			<button class="filter-btn" :class="{ active: activeFilter === 'today' }" @click="activeFilter = 'today'"
				hover-class="filter-btn-hover">今天</button>
			<button class="filter-btn" :class="{ active: activeFilter === 'yesterday' }"
				@click="activeFilter = 'yesterday'" hover-class="filter-btn-hover">昨天</button>
			<button class="filter-btn" :class="{ active: activeFilter === 'month' }" @click="activeFilter = 'month'"
				hover-class="filter-btn-hover">本月</button>
			<button class="filter-btn" :class="{ active: activeFilter === 'lastMonth' }"
				@click="activeFilter = 'lastMonth'" hover-class="filter-btn-hover">上月</button>
			<button class="filter-btn" :class="{ active: activeFilter === 'custom' }" @click="activeFilter = 'custom'"
				hover-class="filter-btn-hover">自定义</button>
		</view>

		<!-- 记录列表 -->
		<view class="record-list">
			<view class="record-item" v-for="(item, index) in recordList" :key="index">
				<!-- 顶部信息 -->
				<view class="record-header">
					<view class="record-type" :class="item.recordType === '充值' ? 'recharge' : 'refund'">
						{{ item.recordType }}
					</view>
					<text class="record-time">{{ item.time }}</text>
				</view>

				<!-- 中间详情区域 -->
				<view class="record-content">
					<!-- 第一行：储值类型 + 数量 -->
					<view class="record-row">
						<text class="row-label">储值类型:</text>
						<text class="row-value">{{ item.type }}</text>
						<text class="row-label">数量:</text>
						<text class="row-value">{{ item.quantity }}</text>
					</view>

					<!-- 第二行：姓名 + 卡号 -->
					<view class="record-row">
						<text class="row-label">姓名:</text>
						<text class="row-value">{{ item.name }}</text>
						<text class="row-label">卡号:</text>
						<text class="row-value">{{ item.cardNo }}</text>
					</view>

					<!-- 第三行：手机 + 操作员 -->
					<view class="record-row">
						<text class="row-label">手机:</text>
						<text class="row-value">{{ item.phone }}</text>
						<text class="row-label">操作员:</text>
						<text class="row-value">{{ item.operator }}</text>
					</view>
				</view>

				<!-- 底部金额区域 -->
				<view class="record-footer">
					<text class="pay-method">支付方式: {{ item.payMethod }}</text>
					<text class="amount" :class="item.recordType === '充值' ? 'recharge' : 'refund'">
						{{ item.recordType === '充值' ? '+' : '-' }}¥{{ item.amount.toFixed(2) }}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeFilter: 'today', // 当前激活的时间筛选
				recordList: [{
						type: '预付款', // 储值类型
						quantity: 1000, // 数量
						name: '张三',
						cardNo: '1254646',
						phone: '152xxxxxxxxx',
						operator: '张三',
						time: '2025-4-2 15:00:00',
						payMethod: '现金支付',
						recordType: '充值', // 类型描述：充值
						amount: 1000.00
					},
					{
						type: '游戏币',
						quantity: 1000,
						name: '张三',
						cardNo: '1254646',
						phone: '152xxxxxxxxx',
						operator: '张三',
						time: '2025-4-2 15:00:00',
						payMethod: '现金支付',
						recordType: '返还', // 类型描述：返还
						amount: 1000.00
					},
					{
						type: '游戏币',
						quantity: 1000,
						name: '张三',
						cardNo: '1254646',
						phone: '152xxxxxxxxx',
						operator: '张三',
						time: '2025-4-2 15:00:00',
						payMethod: '现金支付',
						recordType: '返还', // 类型描述：返还
						amount: 1000.00
					},
					{
						type: '预付款',
						quantity: 1000,
						name: '张三',
						cardNo: '1254646',
						phone: '152xxxxxxxxx',
						operator: '张三',
						time: '2025-4-2 15:00:00',
						payMethod: '微信支付',
						recordType: '充值', // 类型描述：充值
						amount: 1000.00
					}
				]
			};
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: this.$t('title.freeRechargeHome')
			});
		},
		methods: {
			// 格式化货币显示
			formatCurrency(value) {
				if (typeof value !== 'number') return '0.00';
				return value.toLocaleString('zh-CN', {
					minimumFractionDigits: 2,
					maximumFractionDigits: 2
				});
			},
			// 跳转到充值页面
			goToRecharge() {
				uni.navigateTo({
					url: '/pages/recharge/free-recharge'
				});
			},
			// 跳转到返还页面
			goToRefund() {
				uni.navigateTo({
					url: '/pages/recharge/free-recharge-refund'
				});
			}
		}
	};
</script>

<style scoped>
	/* 全局样式重置和基础设置 */
	.page-container {
		min-height: 100vh;
		background-color: #ebebeb;
		padding: 24rpx;
	}

	/* 顶部按钮样式 */
	.top-btns {
		display: flex;
		gap: 24rpx;
		margin-bottom: 30rpx;
	}

	.btn {
		flex: 1;
		height: 92rpx;
		line-height: 92rpx;
		border-radius: 12rpx;
		color: #fff;
		font-size: 34rpx;
		font-weight: 500;
		border: none;
		transition: all 0.3s ease;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.btn-hover {
		opacity: 0.9;
		transform: translateY(2rpx);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
	}

	.recharge-btn {
		background: linear-gradient(135deg, #00b42a, #00a62a);
		/* 绿色：充值 */
	}

	.refund-btn {
		background: linear-gradient(135deg, #f53f3f, #e63939);
		/* 红色：返还 */
	}

	/* 统计数据样式 */
	.stats-wrap {
		display: flex;
		gap: 24rpx;
		margin-bottom: 30rpx;
	}

	.stat-item {
		flex: 1;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx 24rpx;
		text-align: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
		transition: all 0.3s ease;
	}

	.stat-item:active {
		transform: scale(0.98);
	}

	.stat-label {
		display: block;
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 12rpx;
	}

	.stat-value {
		display: block;
		font-size: 36rpx;
		font-weight: bold;
		color: #007aff;
		margin-bottom: 8rpx;
		line-height: 1.3;
	}

	.stat-desc {
		font-size: 24rpx;
		color: #999;
	}

	/* 时间筛选栏样式 */
	.filter-bar {
		display: flex;
		gap: 20rpx;
		padding: 16rpx 0;
		margin-bottom: 30rpx;
		overflow-x: auto;
		/* 支持横向滚动 */
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	.filter-bar::-webkit-scrollbar {
		display: none;
		/* 隐藏滚动条 */
	}

	.filter-btn {
		padding: 0 32rpx;
		height: 72rpx;
		line-height: 72rpx;
		background-color: #fff;
		border-radius: 36rpx;
		font-size: 28rpx;
		color: #666;
		border: none;
		transition: all 0.3s ease;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.filter-btn-hover {
		opacity: 0.9;
	}

	.filter-btn.active {
		background-color: #007aff;
		color: #fff;
		box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
	}

	/* 记录列表样式 */
	.record-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.record-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 0;
		overflow: hidden;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
		transition: all 0.3s ease;
	}

	.record-item:active {
		transform: scale(0.99);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
	}

	/* 记录头部 */
	.record-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 32rpx;
		background-color: #ffffff;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.record-type {
		padding: 6rpx 20rpx;
		border-radius: 16rpx;
		font-size: 24rpx;
		font-weight: 500;
	}

	.record-type.recharge {
		background-color: #e6f7ee;
		color: #00b42a;
	}

	.record-type.refund {
		background-color: #ffebeb;
		color: #f53f3f;
	}

	.record-time {
		font-size: 24rpx;
		color: #000000;
	}

	/* 记录内容区域 */
	.record-content {
		padding: 28rpx 32rpx;
	}

	.record-row {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		flex-wrap: wrap;
	}

	.record-row:last-child {
		margin-bottom: 0;
	}

	.row-label {
		color: #666;
		margin-right: 12rpx;
		min-width: 90rpx;
	}

	.row-value {
		color: #333;
		font-weight: 400;
		margin-right: 32rpx;
		flex: 1;
		max-width: 200rpx;
	}

	/* 记录底部 */
	.record-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 32rpx;
		background-color: #fafafa;
		border-top: 1rpx solid #f0f0f0;
	}

	.pay-method {
		font-size: 26rpx;
		color: #666;
	}

	.amount {
		font-size: 36rpx;
		font-weight: bold;
	}

	.amount.recharge {
		color: #00b42a;
		/* 充值金额：绿色 */
	}

	.amount.refund {
		color: #f53f3f;
		/* 返还金额：红色 */
	}

	/* 响应式设计 */
	@media (max-width: 375px) {
		.page-container {
			padding: 16rpx;
		}

		.stat-value {
			font-size: 32rpx;
		}

		.record-row {
			font-size: 26rpx;
		}

		.row-label {
			min-width: 80rpx;
		}
	}
</style>